<template>
    <el-container class="layout">
        <el-aside :width="collapsed ? '84px' : '300px'">
            <el-menu router default-active="/" :collapse="collapsed">
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <message />
                        </el-icon>主菜单
                    </template>
                    <el-menu-item-group>
                        <template #title>基本设置</template>
                        <el-menu-item index="/">首页</el-menu-item>
                        <el-menu-item index="/about">关于</el-menu-item>
                        <el-menu-item index="/user">用户列表</el-menu-item>
                        <el-menu-item index="/dept">dept</el-menu-item>
                    </el-menu-item-group>
                    <el-sub-menu index="1-4">
                        <template #title>Option</template>
                        <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-container justify="space-between" class="main-layout">
            <el-header>
                <div>
                    <el-icon :size="20" @click="collapsed = !collapsed">
                        <component :is="componentId"></component>
                    </el-icon>
                </div>
                <el-menu mode="horizontal" :ellipsis="false">
                    <el-menu-item index="3">Info</el-menu-item>
                </el-menu>
            </el-header>
            <el-main>
                <app-main />
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { AppMain } from './components'
import { Fold, Expand } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';
const route=useRoute()

const collapsed = ref(false);
const componentId = computed(() => {
    if (collapsed.value) {
        return Expand
    } else {
        return Fold
    }

})
</script>
<style scoped>
.layout {
    min-height: 100%;
}
.main-layout {
    border-left: 1px solid var(--el-border-color-base);
}
.el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    --el-header-padding: 0px;
    border-bottom: 1px solid var(--el-border-color-base);
}
.el-footer {
    border-top: 1px solid var(--el-border-color-base);
}
.el-menu {
    border-right: solid 0px var(--el-menu-border-color);
}
</style>
